<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-ring {
      width: 200px;
      height: 200px;
      position: relative;
    }

    .progress-ring .circle {
      fill: none;
      stroke: #ddd;
      stroke-width: 20;
    }

    .progress-ring .progress {
      fill: none;
      stroke: #0d7137;
      stroke-width: 20;
      stroke-dasharray: 0, 1000;
      stroke-linecap: round;
      transition: stroke-dasharray 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="progress-ring">
    <svg viewBox="0 0 100 100">
      <circle class="circle" cx="50" cy="50" r="40"></circle>
      <circle class="progress" cx="50" cy="50" r="40"></circle>
    </svg>
  </div>
  <input type="number" id="percentageInput" placeholder="输入百分比（0-100）">
  <button onclick="updateProgress()">更新进度</button>

  <script>
    function updateProgress() {
      const percentageInput = document.getElementById('percentageInput');
      const percentage = parseInt(percentageInput.value, 10);
      /*--1.当输入的数据不是数字，或者超出【0,100】,当前函数返回null-----*/
      if (percentage>100||percentage<0||isNaN(percentage)) return null


      const progressRing = document.querySelector('.progress-ring');
      const progressCircle = progressRing.querySelector('.progress');
      const circumference = 2 * Math.PI * 40;


       /*--2.根据输入的百分比设置圆环样式-----*/
      const offset = progressCircle.style.strokeDasharray = `${circumference * percentage / 100} ${circumference}`
      progressCircle.style.strokeDashoffset = offset;
    }
  </script>
</body>
</html>